import { memo } from 'react'
import styles from './Star.module.scss'
import ListQuestionItem from '@/components/listQuestionItem'
import { Typography, Empty, Spin } from 'antd'
import { useTitle } from 'ahooks'
import ListSearch from '@/components/ListSearch'
import useQuestionListData from '@/hooks/useQuestionListData'
import Pagination from '@/components/Pagination'
const { Title } = Typography

const Star = memo(() => {
  //修改网页标题
  useTitle('小慕问卷-标星问卷')

  const { data = {}, loading } = useQuestionListData({ isStar: true })
  const { list = [], total = 0 } = data

  return (
    <div className={styles.star}>
      <div className={styles.header}>
        <Title level={3}>标星问卷</Title>
        <ListSearch />
      </div>
      <div className={styles.QList}>
        {loading && (
          <div style={{ textAlign: 'center' }}>
            <Spin />
          </div>
        )}
        {!loading && list.length === 0 && <Empty />}
        {!loading &&
          list.length !== 0 &&
          list.map((question: any) => {
            return <ListQuestionItem question={question} key={question.id} />
          })}
      </div>
      <div className={styles.footer}>
        <Pagination total={total} />
      </div>
    </div>
  )
})

export default Star
